<!--  -->
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const route = useRoute()
const router = useRouter()

const props = defineProps(['dirs'])

onMounted(tryFindActiveShard)
router.afterEach(() => tryFindActiveShard())
const currentGroup = ref('')
const currentItem = ref('')

function toggleTable(e) {
  const span = e.target.parentNode
  const div = span.children[2]
  div.classList.toggle('flipped')

  if (span.nextElementSibling.classList.contains('show')) {
    span.classList.remove('open')
    span.classList.add('closed')
    span.nextElementSibling.classList.remove('show')
    span.nextElementSibling.classList.add('hide')
  }
  else {
    span.classList.remove('closed')
    span.classList.add('open')
    span.nextElementSibling.classList.add('show')
    span.nextElementSibling.classList.remove('hide')
  }
}

function tryFindActiveShard() {
  const curr = route.path

  for (const v of props.dirs) {
    if (!v.multi) {
      if (curr === v.path) {
        currentGroup.value = v.id
        return
      }
    } else {
      const e = v.children.find(c => c.path === curr)
      if (e) {
        currentItem.value = v.id + '-' + e.id
        currentGroup.value = v.id
        return
      }
    }
  }
  currentGroup.value = '', currentItem.value = ''
}

</script>

<template>
  <ul class="menu-wrapper" v-if="dirs.length">
    <li class="menu-group" v-for="v in dirs" :key="v.id">
      <div v-if="v.multi" class="menu-item" @click="toggleTable">
        <Icon :icon-name="v.icon" />
        <div class="menu-item-title" :class="{ 'menu-item-active': currentGroup === v.id }">
          {{ v.title }}
        </div>
        <div class="menu-item-arrow"></div>
      </div>
      <RouterLink v-else class="menu-item" style="cursor: pointer;"
        :class="{ 'single-menu-item-active': currentGroup === v.id }" :to="{ path: v.path }"
        @click="currentItem = '', currentGroup = v.id">
        <Icon :icon-name="v.icon" />
        <div class="menu-item-title">
          {{ v.title }}
        </div>
        <div>{{ v?.extra }}</div>
      </RouterLink>
      <div v-if="v.multi" class="menu-item-content hide" :style="{ 'max-height': v.children.length * 40 + 'px' }">
        <div v-for="sv in v.children" :key="v.id + '-' + sv.id" class="sidebar-link">
          <RouterLink :to="{ path: sv.path }" class="menu-item-link"
            :class="{ 'link-active': v.id + '-' + sv.id === currentItem }"
            @click="currentItem = v.id + '-' + sv.id, currentGroup = v.id">
            {{ sv.title }}
          </RouterLink>
        </div>
      </div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.menu-wrapper {
  width: 160px;
  margin-left: auto;
  margin-right: 2em;

  .show {
    display: block;
  }

  .hide {
    max-height: 0 !important;
  }

  .open {
    background: var(--linear-02) !important;
    border-bottom: 1px solid var(--border-secondary);
  }
}

.menu-group {
  overflow: hidden;
}

.menu-item {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  cursor: default;
  transition: background-color .1s linear;

  &:hover {
    border-radius: 4px;
    background: rgb(208, 230, 213);
    color: rgb(0, 82, 8) !important;
  }

  .menu-item-title {
    flex: 1;
    line-height: 2em;
    vertical-align: middle;
    padding: .6rem 5px;
    padding-left: 5px;
    font-family: "Oswald", "Bookman Old Style";
  }

  .menu-item-arrow {
    position: relative;
    right: 10px;
    transition: all 0.3s ease-out;

    &::before,
    &::after {
      top: 50%;
      content: '';
      position: absolute;
      background: var(--text-02);
      width: 8px;
      height: 1.5px;
    }

    &::after {
      right: 1px;
      transform: rotate(45deg);

    }

    &::before {
      right: 6px;
      transform: rotate(-45deg);
    }
  }
}

.flipped {
  transform: rotateX(180deg);
}

.menu-item-content {
  transition: max-height .1s ease-out;
}

.menu-empty {
  margin-left: 26px;
  color: var(--side-menu-item-tc);
  height: 100%;
  padding: .75rem 2px .75rem .5rem;
  margin-left: 23px;
  font-family: "Oswald", "Bookman Old Style";
  border-left: 1px solid rgb(12, 114, 12);
  border-bottom: 1px solid #7b7ea4;
  min-height: 3rem;
}

.menu-item-link {
  display: flex;
  align-items: center;
  line-height: 2em;
  margin-left: 23px;
  border-left: 1px solid rgb(12, 114, 12);
  color: var(--side-menu-item-tc);

  padding: 0 2px 0 .5rem;
  font-family: "Oswald", "Bookman Old Style";

  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  min-height: 3rem;

  &:hover {
    border-left: 1px solid rgb(255, 128, 0);
  }
}

.menu-item-active {
  font-weight: bold;
  text-decoration: underline 2px var(--text-02);
  color: var(--text-02)
}

.single-menu-item-active {
  font-weight: bold;
  text-decoration: underline 2px var(--text-02);
  color: var(--text-02);
  border-radius: 4px;
  background: rgb(165, 196, 173) !important;
}

.link-active {
  font-weight: bold;
  color: var(--side-item-active-tc) !important;
  background: var(--linear-03) !important;
}
</style>
